..<template>
  <div>
    <!-- 筛选 -->
    <div style="float: left;display: flex;margin-bottom: 10px;">
      <el-input style="margin-left: 8px;width:50%"
        @clear="initActHistoricalInstance"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程关键字"
        class="initActHistoricalInstance"
        v-model="historicalInstancePage.processDefinitionKey"
        @keydown.enter.native="initActHistoricalInstanceQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initActHistoricalInstance"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程名称"
        class="initActHistoricalInstance"
        v-model="historicalInstancePage.processDefinitionName"
        @keydown.enter.native="initActHistoricalInstanceQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initActHistoricalInstance"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程定义版本"
        class="initActHistoricalInstance"
        v-model="historicalInstancePage.processDefinitionVersion"
        @keydown.enter.native="initActHistoricalInstanceQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initActHistoricalInstance"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程实例名称"
        class="initActHistoricalInstance"
        v-model="historicalInstancePage.processInstanceName"
        @keydown.enter.native="initActHistoricalInstanceQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initActHistoricalInstance"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入实例发起者"
        class="initActHistoricalInstance"
        v-model="historicalInstancePage.startUserId"
        @keydown.enter.native="initActHistoricalInstanceQuery">
      </el-input>
      <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initActHistoricalInstanceQuery">查询</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end">
      <el-button
        type="primary"
        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
      </el-button>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="HistoricalInstanceList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column
                        label="流程关键字"
                        width="250">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>流程名称: {{ scope.row.processDefinitionName }}</p>
                            <p>实例名称: {{ scope.row.name }}</p>
                            <p>开始时间: {{ scope.row.startTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>结束时间: {{ scope.row.endTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>业务编号: {{ scope.row.businessKey }}</p>
                            <p>发起者: {{ scope.row.startUserId }}</p>
                            <p>发起编号: {{ scope.row.startActivityId }}</p>
                            <p>流程编号: {{ scope.row.processDefinitionId }}</p>
                            <p>部署编号: {{ scope.row.deploymentId }}</p>
                            <p>节点编号: {{ scope.row.taskDefinitionKey }}</p>
                            <p>租户编号: {{ scope.row.tenantId }}</p>
                            <p>持续时间: {{ scope.row.durationInMillis}}毫秒
                            {{ scope.row.durationInMillis/(24 * 60 * 60 * 1000)}}天
                            {{ scope.row.durationInMillis/(60 * 1000)}}分</p>
                            <p>租户编号: {{ scope.row.tenantId }}</p>
                            <p>流程版本: {{ scope.row.processDefinitionVersion }}</p>
                            <p>删除原因: {{ scope.row.deleteReason }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.processDefinitionKey }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程名称"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processDefinitionName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="发起者"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startUserId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="开始时间" width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="结束时间" width="150">
                    <template slot-scope="scope">
                        <span v-if="scope.row.endTime!=null">{{scope.row.endTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="结束类型"
                        width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.deleteReason==null">审批结束</span>
                        <span v-else>删除结束</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                style="color: blueviolet;"
                                title="通过流程实例编号分页获取流程节点执行历史|节点执行历史"
                                @click="HistoricActivityInstanceByProcessInstanceId(scope.row)"><i class="el-icon-view"></i>节点执行历史</el-button>
                        <el-button
                                type="text"
                                style="color: green;"
                                title="通过流程实例编号分页获取流程节点详细历史|流程节点详细历史"
                                @click="HistoricDetailByProcessInstanceId(scope.row)"><i class="el-icon-view"></i>流程节点详细历史</el-button>
                        <el-button
                                type="text"
                                style="color: skyblue;"
                                title="通过流程实例编号分页获取流程实例变量历史|流程实例变量历史"
                                @click="HistoricVariableInstanceByProcessInstanceId(scope.row)"><i class="el-icon-view"></i>流程实例变量历史</el-button>
                        <el-button
                                type="text"
                                style="color: red;"
                                title="通过流程实例编号删除历史流程实例"
                                @click="deleteHistoricVariableInstance(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
export default {
 name:"workflowActHistoricalInstance",
 data(){
   return{
    loading: false,
     // 封装查询条件
    historicalInstancePage:{
      processDefinitionKey:'',
      processDefinitionName:'',
      processDefinitionVersion:'',
      processInstanceName:'',
      startUserId:'',
      startedAfterDate:null,
      finishedBeforeDate:null,
      pageNum: 1,
      pageSize: 10
    },
    // 初始化列表
    HistoricalInstanceList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[]
   }
  },
  mounted(){
    // 初始化列表
    this.initActHistoricalInstanceQuery();
  },
 methods:{
   // 流程实例变量历史
   HistoricVariableInstanceByProcessInstanceId(data){
     this.$router.push({
         path: '/HistoricVariableInstance',
         // 参数传递
         query: {
             processInstanceId:data.processInstanceId
         }
     })
   },
   // 流程节点详细历史
   HistoricDetailByProcessInstanceId(data){
     this.$router.push({
         path: '/HistoricDetail',
         // 参数传递
         query: {
             processInstanceId:data.processInstanceId
         }
     })
   },
   // 删除历史流程实例
   deleteHistoricVariableInstance(data){
      this.$confirm('此操作将永久删除【'+data.processInstanceId+'】, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              this.deleteRequest('/activity/ActHistoricalInstance/delete/HistoricVariableInstance/'+data.processInstanceId).then(resp=>{
              if (resp){
                  this.initActHistoricalInstanceQuery();
              }
          })
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消删除'
          });
      });
   },
   // 节点执行历史
   HistoricActivityInstanceByProcessInstanceId(data){
      this.$router.push({
          path: '/HistoricActivityInstance',
          // 参数传递
          query: {
              processInstanceId:data.processInstanceId
          }
      })
   },
   // 查询框清空事件
   initActHistoricalInstance(){
     this.initActHistoricalInstanceQuery();
   },
   // 重置查询条件
    resetCondition(){
        this.historicalInstancePage.processDefinitionKey = '';
        this.historicalInstancePage.processDefinitionName = '';
        this.historicalInstancePage.processDefinitionVersion = '';
        this.historicalInstancePage.processInstanceName = '';
        this.historicalInstancePage.startUserId = '';
        this.historicalInstancePage.startedAfterDate = null;
        this.historicalInstancePage.finishedBeforeDate = null;
        this.initActHistoricalInstanceQuery();
    },
   // 初始化列表
   initActHistoricalInstanceQuery(){
      this.loading = true;
        this.postRequest("/activity/ActHistoricalInstance/query/ProcessHistoricalInstancePageList",this.historicalInstancePage).then(resp => {
        this.loading = false;
        if (resp) {
          this.HistoricalInstanceList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
   // 分页
  sizeChange(currentSize) {
    this.historicalInstancePage.pageSize = currentSize;
    this.initActHistoricalInstanceQuery();
  },
  currentChange(currentPage) {
    this.historicalInstancePage.pageNum = currentPage;
    this.initActHistoricalInstanceQuery();
  }
 }
}
</script>

<style>

</style>
